/**
 * @description  : 身份证号输入组件
 * @descriptionDetail : 身份证号输入组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:08:25
 */
<template>
  <view style="width: 100%;">
    <u-input
      :border="border"
      type="input"
      :disabled="true"
      :placeholder="$attrs.placeholder || '请输入'"
      v-model="credVal"
      v-bind="$attrs"
      @click="show = true"
      :select-open="show"
    ></u-input>
    <u-keyboard v-model="show" mode="number" :tooltip="false" :mask="mask" :safe-area-inset-bottom="true" 
      @change="handleChange" @backspace="handleBackspace"></u-keyboard>
  </view>
</template>
<script>
import Emitter from '@/uview-ui/libs/util/emitter.js';
export default {
  mixins: [Emitter],
  props: {
    value: {
      type: String | Number,
      default: 0
    },
    mask: {   // 是否显示遮罩层
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      credVal: this.value || '',
      border: false,
      show: false,
    }
  },
  methods: {
    handleChange(val) {
      this.credVal += '' + val;
      this.$emit("input", this.credVal);
      // 将当前的值发送到 u-form-item 进行校验
			this.dispatch('u-form-item', 'on-form-change', this.credVal);
    },
    handleBackspace() {
      // 删除最后一个字符
			if(this.credVal.length) {
        this.credVal = this.credVal.substr(0, this.credVal.length - 1);
        this.$emit("input", this.credVal);
        // 将当前的值发送到 u-form-item 进行校验
			  this.dispatch('u-form-item', 'on-form-change', this.credVal);
      };
    },
    handleConfirm() {
      this.$emit("input", this.credVal);
      this.show = false;
    }
  },
}
</script>